<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定支持三元运算符否</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<div class="container" id="tester">
    <template v-for="(item,index) in menu">
        <div class="row">
            <b  @click ="isParent=true;currentGroupID=index">{{item.text}}</b>
        </div>
        <div class="row" >
            <div class="col-sm-2" v-for="(si,ii) in item.submenu" @click ="isParent=false;currentMenuID=ii;currentGroupID=index ">
                {{si.text}}
            </div>

        </div>
    </template>

    <div class="row">
        <div class="col-sm-6 col-sm-offset-3" >
            <input v-model="isParent?menu[currentGroupID].text:menu[currentGroupID].submenu[currentMenuID].text" type="text" class="form-control">
        </div>
    </div>
</div>

<script src="js/vue.js"></script>
<script>

    new Vue({
        el:'#tester',
        data:function(){
            return {
                isParent:true,
                currentGroupID:0,
                currentMenuID:0,
                menu:[
                    {
                        text:"以及父亲目录",
                        submenu:[
                            {text:"15165811518"},
                            {text:"15165811515"},
                            {text:"15165811516"}
                        ]
                    },
                    {
                        text:"二级父亲目录",
                        submenu:[
                            {text:"张全蛋"},
                            {text:"赵铁柱"},
                            {text:"李小花"}
                        ]
                    },
                    {
                        text:"三级父亲目录",
                        submenu:[
                            {text:"张全蛋"},
                            {text:"赵铁柱"},
                            {text:"李小花"}
                        ]
                    }
                ]

            }
        }


    });


</script>
</body>
</html>